<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>用户组管理</title>
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{% static 'plugins/google-fonts/google.fonts.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/fontawesome-free/css/all.min.css' %}">
  <!-- DataTables -->
  <link rel="stylesheet" href="{% static 'plugins/datatables-bs4/css/dataTables.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/datatables-responsive/css/responsive.bootstrap4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/datatables-buttons/css/buttons.bootstrap4.min.css' %}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{% static 'dist/css/adminlte.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/icheck-bootstrap/icheck-bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/jqvmap/jqvmap.min.css' %}">
  <link rel="stylesheet" href="{% static 'dist/css/common.css'%}">
  <link rel="stylesheet" href="{% static 'plugins/overlayScrollbars/css/OverlayScrollbars.min.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/daterangepicker/daterangepicker.css' %}">
  <link rel="stylesheet" href="{% static 'plugins/summernote/summernote-bs4.min.css' %}">
</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- 换行占位 -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <p> </p>
            </div>
        </div>
    </section>
    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-10"></div>
                        <div class="col-2" id="group_add_div" onclick="add_group(this);">
                            <span class="btn btn-success col fileinput-button">
                                <i class="fas fa-plus"></i>
                                <span>新增</span>
                            </span>
                        </div>
                    </div>
                </div>
                <table id="table-template" class="table table-bordered table-hover">
                  <thead>
                      <tr>
                        <td class="col-2">ID</td>
                        <th class="col-6">用户组名称</th>
                        <th class="col-4">管理操作</th>
                      </tr>
                  </thead>
                  <tbody>
                    {% for per in group_data %}
                    <tr>
                        <td>{{ per.id }}</td>
                        <td>{{ per.name }}</td>
                        <td>
                            <div class="col-12">
                                  <div class="btn-group w-100" >
                                      <button type="text" class="btn btn-primary col start"  onclick="ChangeDeleteGroupButton(this,0);">
                                        <i class="fas fa-upload"></i>
                                        <span>修改</span>
                                      </button>
                                      <button  class="btn btn-warning col cancel"  onclick="ChangeDeleteGroupButton(this,1);">
                                        <i class="fas fa-times-circle"></i>
                                        <span>删除</span>
                                      </button>
                                  </div>
                                  <!--页面隐藏存储每一条数据中对应的用户ID和name-->
                                  <input type="hidden" id="id_hidden" value={{ per.id }}>
                                  <input type="hidden" id="name_hidden" value={{ per.name }}>
                            </div>
                        </td>
                    </tr>
                   {% endfor %}
                  </tbody>
                </table>
              <!-- /.card-body -->
              </div>
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        <!-- /.row -->
      </div>
      <!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->
<!--模态窗口，新增的用户组信息-->
<div class="modal fade" id="addGroupModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="post">
                {% csrf_token  %}
                <div class="modal-header">
                    <h4 class="modal-title" style="float:left">新增用户组</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>用户组名称：</p>
                    <input type="text" id="group_name" class="form-control" placeholder="用户组名称">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <a id="addGroupButton" class="btn btn-success" data-dismiss="modal">确定</a>
                </div>
            </form>>
        </div>
    </div>
</div>
<!--模态窗口，修改用户组信息-->
<div class="modal fade" id="ChangeGroupModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="post">
                {% csrf_token  %}
                <div class="modal-header">
                    <h4 class="modal-title" style="float:left">修改用户组</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                    <input type="hidden" id="change_group_id">
                </div>
                <div class="modal-body">
                    <p>用户组名称：</p>
                    <input type="text" id="change_group_name" class="form-control" placeholder="用户组名称">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <a id="ChangeGroupButton" class="btn btn-success" data-dismiss="modal">确定</a>
                </div>
            </form>>
        </div>
    </div>
</div>
<!--模态窗口，删除用户组信息-->
<div class="modal fade" id="DeleteGroupModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form action="" method="post">
                {% csrf_token  %}
                <div class="modal-header">
                    <h4 class="modal-title" style="float:left">提示信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="info">您确认要删除该用户组吗？</p>
                    <input type="hidden" id="delete_group_id">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <a id="deleteGroupButton" class="btn btn-success" data-dismiss="modal">确定</a>
                </div>
            </form>>
        </div>
    </div>
</div>
<!-- jQuery -->
<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
<!-- Bootstrap 4 -->
<script src="{% static 'plugins/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- DataTables  & Plugins -->
<script src="{% static 'plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.bootstrap4.min.js' %}"></script>
<script src="{% static 'plugins/jszip/jszip.min.js' %}"></script>
<script src="{% static 'plugins/pdfmake/pdfmake.min.js' %}"></script>
<script src="{% static 'plugins/pdfmake/vfs_fonts.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.print.min.js' %}"></script>
<script src="{% static 'plugins/datatables-buttons/js/buttons.colVis.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/adminlte.min.js' %}"></script>
<script src="{% static 'plugins/jquery-ui/jquery-ui.min.js' %}"></script>
<!-- Page specific script -->
<script>
  $(function () {
    $('#table-template').DataTable({
      "paging": true,         <!-- 开启表格分页 -->
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  });
</script>
<!--新增、修改、删除用户组,熙响应按键并调用模态窗口-->
<script type="text/javascript">
    //新增用户组
    function add_group(obj){
        $("#addGroupModal").modal({
            backdrop: 'static',
            keyboard: false
        });
    }
    //修改或删除用户组，参数描述：type=0修改，type=1删除
    function ChangeDeleteGroupButton(obj,type){
        var $tds = $(obj).parent().parent().children();     // 获取到父控件div下面的所有子项
        var g_id = $($tds[1]).val();
        var g_name = $($tds[2]).val();
        if(type == 0){
            $("#change_group_id").val(g_id);
            $("#change_group_name").val(g_name);
            $("#ChangeGroupModal").modal({
                backdrop: 'static',
                keyboard: false
            });
        }else{
            $("#delete_group_id").val(g_id);
            $("#DeleteGroupModal").modal({
                backdrop: 'static',
                keyboard: false
            });
        }
    }
</script>
<!--新增用户组,ajax保存数据到后端-->
<script>
    //新增用户组数据确认按钮
    $(function () {
        // 模态框的确定按钮的点击事件
        $("#addGroupButton").click(function () {
            // ajax异步删除
            $.ajax({
                url: "/basic/ajax_add_group/",
                type: "POST",
                data: {//请求参数
                    groupName: $("#group_name").val(),
                    "csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val()
                },
                success: function (data) {
                    window.location.reload()     //执行完成后，刷新当前页面
                },
                //请求失败后操作
                error: function (jqXHR, textStatus, err) {
                    console.log(arguments);
                },
            })
        });
    });
    //修改用户组数据确认按钮
    $(function () {
        // 模态框的确定按钮的点击事件
        $("#ChangeGroupButton").click(function () {
            // ajax异步删除
            $.ajax({
                url: "/basic/ajax_change_group/",
                type: "POST",
                data: {//请求参数
                    groupId: $("#change_group_id").val(),
                    groupName: $("#change_group_name").val(),
                    "csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val()
                },
                success: function (data) {
                    window.location.reload()     //执行完成后，刷新当前页面
                },
                //请求失败后操作
                error: function (jqXHR, textStatus, err) {
                    console.log(arguments);
                },
            })
        });
    });
    //删除用户组数据确认按钮
    $(function () {
        // 模态框的确定按钮的点击事件
        $("#deleteGroupButton").click(function () {
            // ajax异步删除
            $.ajax({
                url: "/basic/ajax_delete_group/",
                type: "POST",
                data: {//请求参数
                    groupId: $("#delete_group_id").val(),
                    "csrfmiddlewaretoken":$("[name = 'csrfmiddlewaretoken']").val()
                },
                success: function (data) {
                    window.location.reload()     //执行完成后，刷新当前页面
                },
                //请求失败后操作
                error: function (jqXHR, textStatus, err) {
                    console.log(arguments);
                },
            })
        });
    });
</script>
</body>
</html>
